<template>
  <svg aria-hidden="true"
       class="svg-icon" :style="'width:' + size + ';height:' + size">
    <use :xlink:href="symbolId" :fill="color"/>
  </svg>
</template>

<script setup lang="ts">
import {computed} from'vue';

const props = defineProps({
  prefix: {
    type: String,
    default: 'icon'
  },
// SVG图标的文件名称
  iconClass: {
    type: String,
    required: true
  },
  color: {
    type: String
  },
  size: {
    type: String,
    default: '1em'
  }
});
// 构造 symbolId 作为图标的唯一标识
// 注意：这个 symbolId 要和 vite.config.js 中指定的 symbolId 格式一致，不然没办法获取到图标
const symbolId = computed(() =>`#${props.prefix}-${props.iconClass}`);
</script>



<style scoped>
.svg-icon {
  overflow: hidden;
  fill: currentColor;
}
</style>